<div class="relative" [ngClass]="content.classes">
  @if (loading()) {
    <div class="loader">
      <app-loading [content]="{ size: 20 }"></app-loading>
    </div>
  }
  @if (loadLibrary()) {
    <div class="flex w-full h-full justify-center items-center">
      <app-loading [content]="{ size: 50 }"></app-loading>
    </div>
  }
  <div #jsoneditor></div>
  @if (content.actions) {
    <div #actions class="actions m-top pb-[10px] flex justify-center items-center">
      @for (action of content.actions; track action) {
        @switch (action.type) {
          @case ('closeDialog') {
            <button
              (click)="updateContent()"
              mat-raised-button
              mat-dialog-close
              color="{{ action.color || 'primary' }}"
            >
              {{ action.label }}
            </button>
          }
          @case ('update') {
            <button
              *reqRolesIf="action"
              (click)="onUpdateAttr(action)"
              mat-raised-button
              color="{{ action.color || 'primary' }}"
              [disabled]="!value"
            >
              {{ action.label }}
            </button>
          }
          @default {
            <app-dynamic-component [inputs]="action" />
          }
        }
      }
    </div>
  }
</div>
